<template>
    <div class="orderDetele">
        <Loading :loading="loading">
            <Form :label-width="150" inline>
                <h3 class="title">对账信息</h3>
                <FormItem label="差异：" style="width:32%">
                    <div>{{ billData.errorAmount | moneyNUm }}</div>
                </FormItem>
                <FormItem label="对账次数：" style="width:32%">
                    <div>{{billData.billCount}}</div>
                </FormItem>
                <FormItem label="应对账时间：" style="width:32%">
                    <div>{{billData.shouldBillDate}}</div>
                </FormItem>
                <FormItem label="对账时间：" style="width:32%">
                    <div>{{billData.completeDate}}</div>
                </FormItem>
                <FormItem label="差异原因：" style="width:32%">
                    <div>{{billData.errorRemark}}</div>
                </FormItem>
                <FormItem label="处理人：" style="width:32%">
                    <div>{{billData.errorHandle}}</div>
                </FormItem>
                <FormItem label="处理时间：" style="width:32%">
                    <div>{{billData.errorHandleTime}}</div>
                </FormItem>

                <h3 class="title">平台清分流水</h3>
                <Table border :columns="platformColumns" :data="platformTableData" size="small"></Table>
                <br />
                <h3 class="title">银行清分流水</h3>
                <Table border :columns="bankColumns" :data="bankTableData" size="small"></Table>
                <br />

                <h3>订单信息</h3>
                <!-- v-for="(item, index) in formChilderData" :key="index"-->
                <div class="childerList">
                    <FormItem label="子订单号：" style="width:32%">
                        <div>{{orderData.subOrderId}}</div>
                    </FormItem>
                    <FormItem label="主订单号：" style="width:32%">
                        <div>{{orderData.orderId}}</div>
                    </FormItem>
                    <FormItem label="商品订单下单时间：" style="width:32%">
                        <div>{{orderData.createdDt}}</div>
                    </FormItem>
                    <FormItem label="支付订单：" style="width:32%">
                        <div>{{ orderData.paymentId }}</div>
                    </FormItem>
                    <FormItem label="支付流水：" style="width:32%">
                        <div>{{ orderData.order ? orderData.order.flowId : '' }}</div>
                    </FormItem>
                    <FormItem label="支付订单创建时间：" style="width:32%">
                        <div>{{orderData.payCreateTime}}</div>
                    </FormItem>
                    <FormItem label="支付订单交易时间：" style="width:32%">
                        <div>{{orderData.payTime}}</div>
                    </FormItem>
                    <FormItem label="商品名称：" style="width:32%">
                        <div>{{orderData.productName}}</div>
                    </FormItem>
                    <FormItem label="业务侧产品编码：" style="width:32%">
                        <div>{{orderData.productCode}}</div>
                    </FormItem>
                    <FormItem label="通道费率：" style="width:32%">
                        <div>{{ (orderData.rate || 0) + '%' }}</div>
                    </FormItem>
                    <FormItem label="支付渠道：" style="width:32%">
                        <div>{{ orderData.payChannel }}</div>
                    </FormItem>
                    <FormItem label="订单金额：" style="width:32%">
                        <div>{{ orderData.subOrderAmount | moneyNUm }}</div>
                    </FormItem>
                    <FormItem label="实付金额：" style="width:32%">
                        <div>{{ orderData.payAmount | moneyNUm}}</div>
                    </FormItem>
                    <FormItem label="是否优惠：" style="width:32%">
                        <div>{{orderData.isCoupon ? '是':'否'}}</div>
                    </FormItem>
                    <FormItem label="支付方式：" style="width:32%">
                        <div>{{ orderData ? orderData.payWay : '' }}</div>
                    </FormItem>

                    <div v-for="(i, ind) in orderData.coupons" :key="ind">
                        <FormItem :label="`优惠券${ind+1}：`" style="width:32%">
                            <div>{{ i.couponName  }}</div>
                        </FormItem>
                        <FormItem label="优惠券编码：" style="width:32%">
                            <div>{{ i.couponCode  }}</div>
                        </FormItem>
                        <FormItem label="优惠金额：" style="width:32%">
                            <div>{{ i.discount ? `${i.discount / 100}元` : ''  }}</div>
                        </FormItem>
                    </div>
                </div>

                <h3>商户信息</h3>
                <!-- v-for="(item, index) in formRefundsData" :key="index + item.refundId" -->
                <div class="childerList">
                    <FormItem label="商户名称" style="width:32%">
                        <div>{{shopData.merchantName}}</div>
                    </FormItem>
                    <FormItem label="商户编码：" style="width:32%">
                        <div>{{shopData.merchantCode}}</div>
                    </FormItem>
                    <FormItem label="组织机构：" style="width:32%">
                        <div>{{shopData.organizationName}}</div>
                    </FormItem>
                    <FormItem label="机构编码：" style="width:32%">
                        <div>{{shopData.organizationCode}}</div>
                    </FormItem>
                    <FormItem label="开户行：" style="width:32%">
                        <div>{{shopData.openingBank}}</div>
                    </FormItem>
                    <FormItem label="账户结算类型：" style="width:32%">
                        <div>{{shopData.accountTypeName}}</div>
                    </FormItem>
                    <FormItem label="银行账号：" style="width:32%">
                        <div>{{shopData.accountNo}}</div>
                    </FormItem>
                    <FormItem label="合同有效期：" style="width:32%">
                        <!-- <div>{{shopData.contractStartDate}} -- {{shopData.contractStartDate}}</div> -->
                        <div v-if="shopData.contractStartDate">{{`${shopData.contractStartDate}-${shopData.contractStartDate}`}}</div>
                    </FormItem>
                </div>

                <h3>清分信息</h3>
                <!-- v-for="(item, index) in formCouponsDtat" :key="index + item" -->
                <div class="childerList">
                    <FormItem label="清分规则名称：" style="width:32%">
                        <div>{{ruleData.ruleName}}</div>
                    </FormItem>
                    <FormItem label="规则类型：" style="width:32%">
                        <div>{{ruleData.ruleTypeCn}}</div>
                    </FormItem>
                    <FormItem label="结算类型：" style="width:32%">
                        <div>{{ruleData.settlementTypeCn}}</div>
                    </FormItem>
                    <FormItem label="规则编码：" style="width:32%">
                        <div>{{ruleData.ruleCode}}</div>
                    </FormItem>
                    <FormItem label="产品单价：" style="width:32%">
                        <div>{{ ruleData.productPrice }}</div>
                    </FormItem>
                    <FormItem label="清分规则：" style="width:32%">
                        <div>{{ruleData.clearingRuleCn}}</div>
                    </FormItem>
                    <FormItem label="平台应收：" style="width:32%">
                        <div>{{ ruleData.clearingRule == 1 ? `${ruleData.platformReceivable}%` : ruleData.clearingRule == 2 ? `${ruleData.platformReceivable}元` : ''}}</div>
                    </FormItem>
                    <FormItem label="商户应收：" style="width:32%">
                        <div>{{ ruleData.clearingRule == 1 ? `${ruleData.merchantReceivable}%` : ruleData.clearingRule == 2 ? `${ruleData.merchantReceivable}元` : '' }}</div>
                    </FormItem>
                    <FormItem label="规则优先级：" style="width:32%">
                        <div>{{ruleData.priorityLevel}}</div>
                    </FormItem>
                    <FormItem label="规则生效日期：" style="width:32%">
                        <div>{{ruleData.effectiveDate}}</div>
                    </FormItem>
                    <FormItem label="规则失效日期：" style="width:32%">
                        <div>{{ruleData.expireDate}}</div>
                    </FormItem>
                    <FormItem label="清分周期：" style="width:32%">
                        <div v-if="ruleData.clearingCycleMode === '1'">T + {{ ruleData.clearingCycleValue }}</div>
                        <div v-if="ruleData.clearingCycleMode === '2'">{{ ruleData.clearingCycleValue }}日/{{ ruleData.clearingCycleValueExt }}个月</div>
                    </FormItem>
                    <FormItem label="订单核销日期：" style="width:32%">
                        <div>{{ruleData.verifiedTime}}</div>
                    </FormItem>
                    <FormItem label="应清算日期：" style="width:32%">
                        <div>{{ruleData.shouldClearDate}}</div>
                    </FormItem>
                </div>
            </Form>
            <Button type="primary" @click="goBack">返回</Button>
        </Loading>
    </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/clearingDeteleAccountModule";
import {
    InputNumber,
    Input,
    Button,
    Select,
    Form,
    FormItem,
    Message,
    Option,
    Table
} from "view-design";
import Loading from "@/components/Loading";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
import util from '@/utils/util'

export default {
    name: "clearingDeteleForm",
    components: {
        Table,
        InputNumber,
        Loading,
        Input,
        Button,
        Form,
        FormItem,
        Message,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        Select,
        Option,
        Authc
    },
    props: ["id"],
    created() {
        this.getDetailInfo();
    },
    data() {
        return {
            /** 对账信息 **/
            billData: {
                errorAmount: '', /** 差异金额 **/
                billCount: '', /** 对账次数 **/
                shouldBillDate: '', /** 应对账时间 **/
                completeDate: '', /** 对账时间 **/
                errorRemark: '', /** 差异原因 **/
                errorHandle: '', /** 差异处理人 **/
                errorHandleTime: '', /** 处理时间 **/
            },
            /** 订单信息 **/
            orderData: {
                subOrderId: '', /** 子订单号 **/
                orderId: '', /** 主订单号 **/
                createdDt: '', /** 商品订单下单时间 **/
                paymentId: '', /** 支付订单号 **/
                flowId: '', /** 渠道支付订单号 **/
                payCreateTime: '', /** 支付订单创建时间 **/
                payTime: '', /** 支付订单交易时间 **/
                productName: '', /** 商品名称 **/
                productCode: '', /** 业务侧产品编码 **/
                rate: '', /** 通道费率 **/
                payChannel: '', /** 支付渠道 **/
                orderAmount: '', /** 订单金额 **/
                payAmount: '', /** 实付金额 **/
                isCoupon: '', /** 是否优惠 **/
                payWay: '', /** 支付方式 **/
                order: {},  /** 刘介港返回的订单信息 **/
            },
            /** 商户信息 **/
            shopData: {
                merchantName: '', /** 商户名称 **/
                merchantCode: '', /** 商户编号 **/
                organizationName: '', /** 组织名称 **/
                organizationCode: '', /** 组织编号 **/
                openingBank: '', /** 开户银行 **/
                accountTypeName: '', /** 账户类型 （账户结算类型） **/
                accountNo: '', /** 银行账号 （账号） **/
            },
            /** 清分信息 **/
            ruleData: {
                ruleName: '', /** 规则名称 **/
                ruleType: '', /** 规则类型 **/
                settlementType: '', /** 结算类型 **/
                productPrice: '', /** 产品单价 **/
                clearingRule: '', /** 清分规则 **/
                platformReceivable: '', /** 平台应收 **/
                merchantReceivable: '', /** 商户应收 **/
                priorityLevel: '', /** 优先级 **/
                effectiveDate: '', /** 规则生效时间 **/
                expireDate: '', /** 规则失效时间 **/
                clearingCycleValue: '', /** 清分周期值 **/
            },
            /** 优惠劵 **/
            formCouponsDtat: [],
            platformColumns: [
                {
                    title: "费用类型",
                    align: "center",
                    key: "costTypeCn",
                    minWidth: 100
                },
                {
                    title: "应清分日期",
                    align: "center",
                    key: "shouldClearDate",
                    minWidth: 150
                },
                {
                    title: "商户号",
                    align: "center",
                    key: "merchantCode",
                    minWidth: 200
                },
                {
                    title: "清分金额(元)",
                    align: "center",
                    key: "clearAmount",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.clearAmount / 100;
                        return h('span', util.toMoney(item))
                    },
                },
                {
                    title: "付款账户名",
                    align: "center",
                    key: "payAcctName",
                    minWidth: 180
                },
                {
                    title: "付款账号",
                    align: "center",
                    key: "payAcct",
                    minWidth: 200
                },
                {
                    title: "收款账户名",
                    align: "center",
                    key: "colAcctName",
                    minWidth: 200
                },
                {
                    title: "收款账号",
                    align: "center",
                    key: "colAcct",
                    minWidth: 180
                },
                {
                    title: "状态",
                    align: "center",
                    minWidth: 100,
                    key: "billStatusCn"
                }
            ],
            platformTableData: [],  /** 平台清分流水数据 **/
            bankColumns: [
                {
                    title: "清分批次号",
                    align: "center",
                    key: "clearBatchNo",
                    minWidth: 155
                },
                {
                    title: "招行订单号",
                    align: "center",
                    key: "bankOrderId",
                    minWidth: 220
                },
                {
                    title: "外部订单号",
                    align: "center",
                    key: "orderId",
                    minWidth: 200
                },
                {
                    title: "子订单号",
                    align: "center",
                    key: "subOrderId",
                    minWidth: 180
                },
                {
                    title: "商户号",
                    align: "center",
                    key: "subMchId",
                    minWidth: 180
                },
                {
                    title: "付款账户名",
                    align: "center",
                    key: "payAcctName",
                    minWidth: 180
                },
                {
                    title: "付款账号",
                    align: "center",
                    key: "payAcct",
                    minWidth: 160
                },
                {
                    title: "收款账户名",
                    align: "center",
                    key: "colAcctName",
                    minWidth: 185
                },
                {
                    title: "收款账号",
                    align: "center",
                    key: "colAcct",
                    minWidth: 140
                },
                {
                    title: "清分金额",
                    align: "center",
                    key: "clearAmount",
                    minWidth: 100,
                    render: (h, params) => {
                        return h('span', util.toMoney(params.row.clearAmount / 100))
                    }
                },
                {
                    title: "订单日期",
                    align: "center",
                    key: "payTime",
                    minWidth: 100
                },
                {
                    title: "核销时间",
                    align: "center",
                    key: "verifiedTime",
                    minWidth: 150
                }
            ],
            bankTableData: [],  /** 银行清分流水 **/
            disabled: false
        };
    },
    methods: {
        /** 获取详情 **/
        async getDetailInfo(){
            try {
                let id = this.$route.query.id;
                let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
                console.log(res.data);
                let info = res.data;
                /** 对账信息 **/
                this.billData.errorAmount = info.errorAmount; /** 差异金额 **/
                this.billData.billCount = info.billCount; /** 对账次数 **/
                this.billData.shouldBillDate = info.shouldBillDate; /** 应对账时间 **/
                this.billData.completeDate = info.completeDate; /** 对账时间 **/
                this.billData.errorRemark = info.errorRemark; /** 差异原因 **/
                this.billData.errorHandle = info.errorHandle; /** 差异处理人 **/
                this.billData.errorHandleTime = info.errorHandleTime; /** 处理时间 **/
                /** 平台清分流水 **/
                this.platformTableData = info.platformBillRes;
                /** 银行清分流水 **/
                this.bankTableData = info.bankBillRes;
                /** 订单信息 **/
                if( info.orderRes ) {
                    this.orderData = info.orderRes;
                }
                /** 商户信息 **/
                if( info.merchantRes ) {
                    this.shopData = info.merchantRes;
                }
                /** 清分信息 **/
                if( info.settlementRuleRes ) {
                    this.ruleData = info.settlementRuleRes;
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        goBack() {
            this.$router.push({
                path: '/settlement/admin/settlementCenter/clearingDetele',
            });
        }
    },
    computed: {
        loading: function() {
            let result = this.$store.state[namespace].loading;
            return result;
        }
    },
    filters: {
        moneyNUm (num) {
            if (num == 0 || !num) {
                return '0.00';
            } else {
                console.log(num, '44')
                num = parseFloat(num / 100);
                num = num.toFixed(2);
                num = num.toLocaleString();
                if (num.indexOf('.') < 0) {
                num = num + '.00';
                }
                return num;
                // let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                // return reg.test(val)
            }
        }
    }
};
</script>

<style></style>
<style lang="less">
.orderDetele {
    .title {
        border-bottom: 1px solid #999;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .orderList {
        color: blue;
        cursor: pointer;
    }
    .childerList {
        border-top: 1px solid #999;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-top: 10px;
    }
    .ivu-btn-primary {
        margin-bottom: 20px;
    }
    .ivu-form-item {
        margin-bottom: 10px;
    }
    .textColorGray,
    .textColorGray .ivu-form-item-label {
        color: #a3a3a3;
    }
}
</style>
